﻿<template>
    <div class="sessionlist">
        <div class="toolbar">
            <el-button-group>
                <el-button size="small" type="primary" icon="el-icon-close" v-on:click="clear">Clear</el-button>
                <el-button size="small" type="primary" icon="el-icon-delete" v-on:click="deleteSelected" :disabled="!selectedsession">Delete</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" v-on:click="refresh" :disabled="loading">Refresh</el-button>
            </el-button-group>

            <hubconnstatus style="float:right" :connection="connection"></hubconnstatus>
        </div>

        

        <el-alert v-if="error" type="error" title="Error" show-icon>
            {{error.message}}

            <el-button v-on:click="refresh">Retry</el-button>
        </el-alert>
        <el-table :data="sessions" v-loading="loading" empty-text="No sessions" highlight-current-row @current-change="handleCurrentChange" class="table" 
                  :default-sort="{prop: 'endDate', order: 'descending'}" type="selection" reserve-selection="true" row-key="id">
            <el-table-column property="endDate" label="End Date" width="120" sortable :formatter="formatDate">
            </el-table-column>
            <el-table-column property="clientAddress" label="Client Address" sortable>
            </el-table-column>
            <el-table-column property="numberOfMessages" label="# Msgs" width="120" sortable>
                <template slot-scope="scope">
                    <i class="el-icon-warning" v-if="scope.row.terminatedWithError" title="This session terminated abnormally"></i>
                    {{scope.row.numberOfMessages}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script src="./sessionlist.ts"></script>